<template>
  <view class="container">
    <!-- 搜索栏 -->
    <!-- 		<view class="search-box">
			<view class="inp">
				<uni-easyinput v-model="searchParam.name" prefixIcon="search" placeholder="商品名称/编码/助记码" :clearable="true"
					border="none" :prefixIconStyle="prefixIconStyle" />
				<view class="btn">查询</view>
			</view>
		</view> -->
    <!--  tab 栏 -->
    <u-empty v-if="tabMenus == null || tabMenus.length == 0" />
    <view v-else>
      <view class="tabs">
        <u-tabs :list="tabMenus" lineColor="#F3C45D" lineWidth="30" :activeStyle="activeStylfe" @click="onTabClick"></u-tabs>
      </view>

      <u-empty v-if="leftMenus == null || leftMenus.length == 0" />
      <view v-else class="content">
        <!-- 左tab栏 -->
        <scroll-view class="menus" scroll-with-animation scroll-y>
          <view @click="onLeftClick(index)" class="items" :id="`menu-${item.id}`" :class="{ current: currentCateIdx == index }" v-for="(item, index) in leftMenus" :key="item.id">
            <text>{{ item.name }}</text>
          </view>
        </scroll-view>
        <!-- 内容区  -->
        <view class="details" style="padding: 20rpx">
          <uni-forms ref="form" v-if="details !== null">
            <uni-forms-item class="form-item" label="做法分组" name="taskTypeId">
              <view class="lbl">做法分组：</view>
              <picker :disabled="disabled" class="form-item-right" style="flex: 1" @change="bindPicker1Change" v-model="details.taskTypeId" :range="tabMenus" :range-key="'name'">
                <view class="uni-input">{{ tabMenus.find((item) => item.id == details.taskTypeId).name }}</view>
              </picker>
            </uni-forms-item>

            <uni-forms-item class="form-item" label="做法标签" name="name">
              <view class="lbl">做法标签:</view>
              <uni-easyinput :disabled="disabled" class="form-item-right" type="text" v-model="details.name" />
            </uni-forms-item>

            <uni-forms-item class="form-item" label="做法变价" name="name">
              <view class="lbl">做法变价：</view>
              <picker :disabled="disabled" class="form-item-right" @change="bindPicker2Change" :range-key="'value'" :range="addPriceWayList" v-model="details.addPriceWay">
                <view class="uni-input">
                  {{ addPriceWayList[details.addPriceWay].value }}
                </view>
              </picker>
            </uni-forms-item>

            <uni-forms-item class="form-item" label="价格" name="price">
              <view class="lbl">价格:</view>
              <uni-easyinput :disabled="disabled" class="form-item-right" type="text" v-model="details.price" />
            </uni-forms-item>

            <uni-forms-item class="form-item" label="是否通用" name="currencyFlag">
              <view class="lbl">是否通用:</view>
              <!-- <radio-group
                :disabled="disabled"
                class="form-item-right"
                name="currencyFlag"
              >
                <label style="margin-right: 30rpx">
                  <radio
                    :disabled="disabled"
                    :value="1"
                    :checked="details.currencyFlag == 1"
                  />
                  <text>是</text>
                </label>
                <label>
                  <radio
                    :disabled="disabled"
                    :value="0"
                    :checked="details.currencyFlag !== 1"
                  />
                  <text>否</text>
                </label>
              </radio-group> -->
              <u-radio-group v-model="details.currencyFlag">
                <u-radio size="20" activeColor="#edac2f" :customStyle="{ marginTop: '12rpx' }" label="是" :name="1"></u-radio>
                <u-radio size="20" activeColor="#edac2f" :customStyle="{ marginLeft: '8px', marginTop: '12rpx' }" label="否" :name="0"></u-radio>
              </u-radio-group>
            </uni-forms-item>
          </uni-forms>
          <view class="btn-group">
            <button v-if="disabled == true && details !== null" style="background-color: #f3c45d; color: #fff" size="mini" @click="btnDel">删除</button>
            <button v-if="details !== null && disabled == true" @click="btnEditClick" style="background-color: #f3c45d; color: #fff" size="mini">编辑</button>
            <button v-if="details !== null && disabled == false" @click="btnSaveClick" style="background-color: #f3c45d; color: #fff" size="mini">保存</button>
            <button style="margin-right: 20rpx; background-color: #f3c45d; color: #fff" size="mini">保存并新增</button>
            -->
          </view>
        </view>
      </view>
    </view>
    <uni-fab ref="fab" :pattern="pattern" :popMenu="false" horizontal="right" @fabClick="btnAddClick" />
  </view>
</template>

<script>
import cellGroup from '../../../uni_modules/uview-ui/libs/config/props/cellGroup';
import { uNavigateTo, umodal, utoast } from '../../../utils/uniUtils.js';
export default {
  data() {
    return {
      searchParam: {
        name: ''
      },
      prefixIconStyle: {
        fontSize: '24px'
      },
      activeStyle: {
        color: '#F3C45D'
      },
      pattern: {
        buttonColor: '#F3C45D'
      },
      tabMenus: null,
      leftMenus: null,
      currentCateIdx: 0, //左边默认分类
      addPriceWayList: [
        // 加价方式
        {
          id: 0,
          value: '不加价'
        },
        {
          id: 1,
          value: '固定加价'
        },
        {
          id: 2,
          value: '按重量加价'
        }
      ],
      details: null, //   做法详情
      disabled: true, // 禁用
      lock: false // 节流锁
    };
  },
  async mounted() {
    await this.GetFoodTaskCategory();
  },
  methods: {
    fabClick() {
      uNavigateTo('/pages/workbench/food/transfer');
    },
    bindPicker1Change(e) {
      // console.log("e-->", e);
      this.details.taskTypeId = this.tabMenus[e.detail.value].id;
    },
    bindPicker2Change(e) {
      // console.log("e-->", e);
      this.details.addPriceWay = this.addPriceWayList[e.detail.value].id;
    },
    /**
     *  上tab栏 点击事件
     */
    async onTabClick(e) {
      await this.GetFoodTask(e.index);
      this.currentCateIdx = 0;
      this.disabled = true;
    },
    /**
     * 左tab栏点击事件
     */
    onLeftClick(idx) {
      this.currentCateIdx = idx;
      this.details = this.leftMenus[idx];
      this.disabled = true;
    },
    /**
     * 做法分组选择事件
     */
    taskCataChange(e) {
      console.log(e);
    },
    /**
     * 获取做法分类
     */
    async GetFoodTaskCategory() {
      let {
        data: { list }
      } = await this.$api.GetFoodTaskCategory({
        pageNum: 1,
        pageSize: 9999
      });
      console.log('list-->', list);
      this.tabMenus = list;
      await this.GetFoodTask();
    },
    /**
     * 获取做法
     */
    async GetFoodTask(idx = 0) {
      if (this.tabMenus[idx] != null) {
        let {
          data: { list }
        } = await this.$api.GetFoodTask({
          pageNum: 1,
          pageSize: 9999,
          taskTypeId: this.tabMenus[idx].id
        });
        // console.log("FoodTasklist-->", list);
        this.leftMenus = list;
        this.details = this.leftMenus[0] ?? null;
      }
    },

    async btnDel() {
      const res = await umodal();
      // 确定删除
      if (res) {
        await this.$api.DelFoodTask({
          id: this.details.id
        });
        await this.GetFoodTaskCategory();
      }
    },
    /**
     * 添加按钮点击事件
     */
    async btnAddClick() {
      uni.navigateTo({
        url: '/pages/workbench/task/doAdd'
      });
    },
    //编辑按钮点击事件
    async btnEditClick() {
      this.disabled = false;
    },

    async btnSaveClick() {
      await this.EditFoodTask();
    },
    /**
     *  编辑数据
     */
    async EditFoodTask() {
      if (this.details.name.trim().length == 0) {
        utoast('做法名称为空！', 'error');
        return;
      }
      const res = await this.$api.EditFoodTask(this.details);
      if (res.code == 0) {
        await this.GetFoodTaskCategory();
        this.disabled = true;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@import '~@/pages/workbench/food/list.scss';

.container {
  .details {
    background-color: #fff;

    .form-item {
      display: flex;
      padding: 14rpx 0;

      .lbl {
        width: 80px;
        font-size: 14px;
      }

      .form-item-right {
        flex: 1;
      }
    }
  }

  .btn-group {
    display: flex;
    justify-content: space-around;
    padding-top: 22rpx;
  }
}
</style>
